<template>
  <div>
    <sui-popup
      flowing
      hoverable
      :content="content"
    >
      <sui-icon
        class="edit icon"
        name="edit outline"
        style="margin-bottom:40px;z-index: 10;padding:0;font-size: 40px;"
        slot="trigger"
      />

    </sui-popup>
    <portal-target name="semantic-ui-vue"> </portal-target>
  </div>
</template>
<script>
export default {
  name: "zui-alter-icon",
  props: {
    content: {
      type: String,
      default: () => {
        更改设置;
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ui.top.left.popup {
  bottom: 75px !important;
  transition: color 0.6s ease, transform 0.2s ease;
}
/deep/ i.icon.outline {
  transition: color 0.6s ease, transform 0.2s ease;
  color: #ffffff;
  &:hover {
    transform: scale(1.5);
    color: rgba(152, 28, 235, 0.4);
  }
}
</style>
